<template>
  <transition name="fade">
    <div class="admin_address_wrap" @touchmove.stop="stop_slider" @touchstart="start_slider">
        <div class="add_header">
           <p>请选择优惠券</p><span @click="cancle1"></span>
        </div>
         <div class="add_body" ref="scroll_wrap">
           <coupon-item  @selectCoupon="selectCoupon"
                         :item="couponItem"
                         v-for="(couponItem , index) in coupon_list"
                         :key="index">
           </coupon-item>
         </div>
         <div class="confirm_wrap"  @click="cancle1">确认选择</div>
         <div class="loading_wrap" v-show="isLoading">
            <loading></loading>
         </div>
    </div>
  </transition>
</template>

<script>
  import back from 'components/back'
  import {stop_slider} from 'assets/base/base'
  import couponItem from 'components/coupon_item'
  import {get_cookie} from 'assets/cookie/cookie'
  import {get_ok_coupon,set_coupon} from 'api/coupon'
  import loading from 'base/loading'
    export default {
        name: "addres",
      props:['title','id'],
      data(){
          return{
            add_address:false,
            coupon_list:[],
            set_data:null,
            titl:'',
            ID:'',
            isLoading:false
          }
      },
      created(){
        this.ID=this.id
        this.get_last_ajax=(()=>{
         let i=0
         let arr=[]
         return ()=>{
              i++
           ((i)=>{
             arr.push(1)
             get_ok_coupon({
               token:get_cookie('key')
             }).then((res)=>{
               this.isLoading=false
               if(res.status===200&&res.data.resStatus===0) {
                 if(i===arr.length){
                   console.log(i)
                   console.log(arr.length)
                   this.coupon_list = res.data.data.use
                 }
               }else{
                 this.coupon_list=[]
               }
             })
           })(i)
         }
       })()
        this.get_coupon_list()
      },
      computed:{
        address_list_reverse(){
          return  this.address_list.reverse()
        }
      },
      methods:{
        start_slider(e){
          this.start={
            X:e.touches[0].pageX,
            Y:e.touches[0].pageY
          }
        },
        stop_slider(e){
          stop_slider(e,this.$refs.scroll_wrap,this.start)
        },
        selectCoupon(id,active){
          set_coupon({
            token:get_cookie('key'),
            couponId:id,
            sign:active
          }).then(res=>{
            console.log(res)
            if (res.status === 200&&res.data.resStatus===0) {
              this.get_coupon_list()
            }

          })
        },
        get_coupon_list(){
          this.isLoading=true
         this.get_last_ajax()
        },
        cancle1(){
          this.$emit('get_order_info')
         this.$router.back()
        }
      },
      components:{
          back,
        couponItem,
        loading
      }
    }
</script>

<style scoped lang="scss">
    .admin_address_wrap{
      position: fixed;
      background:#eee;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
    }
    .add_header{
      position: absolute;
      height: 45px;
      width: 100%;
      background-color: #fff;
      z-index: 1;
      >p{
        height: 45px;
        line-height: 45px;
        color: #999;
      }
      >span{
        position: absolute;
        right: 10px;
        top: 13px;
        height: 15px;
        width: 15px;
        background-image: url('../assets/img/x.png');
        background-size: 100% 100%;
      }
    }
    .add_footer{
      position: absolute;
      bottom: 10px;
      height: 35px;
      background: #019fe8;
      width: 80%;
      left: 10%;
      line-height: 35px;
      margin: 0 auto;
      color: #fff;
      letter-spacing: 1px;
      border-radius: 5px;
    }
    .add_body{
   padding-bottom: 55px;
   padding-top: 48px;
   height:100%;
   width: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
    .content{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
    width: 95%;
    margin: 10px auto 0 auto;
    >p{
      overflow: hidden;
      height: 14px;
      line-height: 14px;
      >span{
        float: left;
        margin-left: 22px;
      }
      >b{
        float: left;
        margin-left: 15px;
      }
      >i{
        float: right;
        margin-right: 13px;
      }
    }
    >h5{
      text-align: left;
      padding-left: 48px;
      margin-top: 13px;
      font-weight: 500;
      color: #999;
    }
    >div{
      height: 25px;
      line-height: 25px;
      margin-top: 10px;
      padding-top: 5px;
      border-top: 1px solid #ddd;
      >span{
        float: left;
        width: 20px;
        height: 20px;
        border: 1px solid #aaa;
        border-radius: 50%;
        margin-left: 20px;
      }
      >.active{
        background-size: 100% 100%;
        background-image: url('../assets/img/activeRed.png');
        border: none;
      }
      >p{
        float: right;
        height: 25px;
        margin-right: 26px;
      }
    }
  }
    .confirm_wrap{
      position: absolute;
      bottom: 12px;
      left: 10%;
      width: 80%;
      height: 35px;
      line-height: 35px;
      color: #fff;
      font-size: 13px;
      background-color: #019fe8;
      border-radius: 5px;
      letter-spacing: 2px;
    }
    .loading_wrap{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background-color: rgba(255,255,255,0.2);
    }
    .fade-enter-active /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 0;
    }

    .fade-enter-to /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 1;
      transition: all .5s;
    }
</style>
